<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets II in Java Gnome</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Java Gnome, Widgets, Java, programming, linux">
<meta name="description" content="Widgets II in Java Gnome">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets II in Java Gnome</h1>

<p>
In this part of the Java Gnome programming tutorial, we continue 
introducing widgets.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<h2>Entry</h2>

<p>
The <b class="keyword">Entry</b> is a single line text entry field. 
This widget is used to enter textual data. 
</p>

<div class="codehead">entry.java</div> 
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Editable;
import org.gnome.gtk.Entry;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows how to use
 * an Entry widget.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GEntry extends Window {

    private Label label;
    private Entry entry;

    public GEntry() {
    
        setTitle("Entry");
        
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
    
        setDefaultSize(250, 200);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    
    public void initUI() {
        
        label = new Label("...");

        entry = new Entry();

        entry.connect(new Entry.Changed() {
            public void onChanged(Editable editable) {
                label.setLabel(entry.getText());
            }
        });

        Fixed fix = new Fixed();
        fix.put(entry, 60, 100);
        fix.put(label, 60, 40);

        add(fix);

    }
    
    
    public static void main(String[] args) {
        Gtk.init(args);
        new GEntry();
        Gtk.main();
    }  
}
</pre>

<p>
This example shows an entry widget and a label. The text that we key in the 
entry is displayed immediately in the label control. 
</p>

<pre class="explanation">
 entry = new Entry();
</pre>

<p>
<b class="keyword">Entry</b> widget is created. 
</p>

<pre class="explanation">
 entry.connect(new Entry.Changed() {
   public void onChanged(Editable editable) {
       label.setLabel(entry.getText());
   }
 });
</pre>

<p>
If the text in the <b class="keyword">Entry</b> widget is changed,
we call the <b class="keyword">onChanged()</b> method. In this 
method, we get the text from the <b class="keyword">Entry</b> widget
and set it to the label. 
</p>



<br>
<img src="/img/gui/javagnome/entry.png" alt="Entry Widget">
<div class="figure">Figure: Entry Widget</div>
<br>


<h2>Scale</h2>

<p>
The <b class="keyword">Scale</b> is a widget, that lets the user graphically select a value 
by sliding a knob within a bounded interval. Our example will show a volume control. 
</p>

<div class="codehead">hscale.java</div> 
<pre class="code">
package com.zetcode;

import java.io.FileNotFoundException;

import org.gnome.gdk.Event;
import org.gnome.gdk.Pixbuf;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.HScale;
import org.gnome.gtk.Image;
import org.gnome.gtk.Range;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * Java Gnome tutorial
 *
 * This program shows how to use 
 * the HScale widget. It implements a 
 * volume control.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GHScale extends Window {

    private HScale hscale;
    private Image image;
    
    private Pixbuf mute;
    private Pixbuf min;
    private Pixbuf med;
    private Pixbuf max;

    public GHScale() {
    
        setTitle("HScale");
    
        initUI();
        
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setDefaultSize(260, 120);
        setPosition(WindowPosition.CENTER);
        showAll();
    }
    
    public void initUI() {
    
        loadImages();
        

        hscale = new HScale(0, 99, 1);
        hscale.setSizeRequest(130, 45);
        hscale.setCanFocus(false);
        
        image = new Image("mute.png");
        
        hscale.connect(new HScale.ValueChanged() {

            public void onValueChanged(Range range) {
                int pos = (int) hscale.getValue();
                
                if (pos == 0) {
                    image.setImage(mute);
                } else if (pos > 0 && pos <= 30) {
                    image.setImage(min);
                } else if (pos > 30 && pos < 80) {
                    image.setImage(med);
                } else {
                    image.setImage(max);
                }
            }
        });
        
        Fixed fixed = new Fixed();
        
        fixed.put(hscale, 40, 20);
        fixed.put(image, 220, 40);
        
        add(fixed);
    }
    
    private void loadImages() {
        try {
            mute = new Pixbuf("mute.png");
            min = new Pixbuf("min.png");
            med = new Pixbuf("med.png");
            max = new Pixbuf("max.png");
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }
    
    
    public static void main(String[] args) {      
        Gtk.init(args);
        new GHScale();
        Gtk.main();
    }
}
</pre>

<p>
In the example above, we have  <b class="keyword">HScale</b> and 
<b class="keyword">Image</b> widgets. By dragging the scale we change the image
on the <b class="keyword">Image</b> widget.
</p>

<pre class="explanation">
 hscale = new HScale(0, 99, 1);
</pre>

<p>
<b class="keyword">HScale</b> widget is created. The parameters
are lower boundary, upper boundary and step. 
</p>

<pre class="explanation">
 int pos = (int) hscale.getValue();
</pre>

<p>
In the <b class="keyword">onValueChanged()</b> method we obtain the
value of the scale widget. 
</p>

<pre class="explanation">
 if (pos == 0) {
     image.setImage(mute);
 } else if (pos > 0 && pos <= 30) {
     image.setImage(min);
 } else if (pos > 30 && pos < 80) {
     image.setImage(med);
 } else {
     image.setImage(max);
 }
</pre>

<p>
Depending on the obtained value, we change the picture in
the image widget. 
</p>

<br>
<img src="/img/gui/javagnome/scale.png" alt="HScale Widget">
<div class="figure">Figure: HScale Widget</div>
<br>


<h2>ToggleButton</h2>

<p>
<b class="keyword">ToggleButton</b> is a button that has two states. Pressed and not pressed. 
You toggle between these two states by clicking on it. There are situations where 
this functionality fits well. 
</p>

<div class="codehead">togglebuttons.java</div>
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Color;
import org.gnome.gdk.Event;
import org.gnome.gtk.DrawingArea;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.StateType;
import org.gnome.gtk.ToggleButton;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program demonstrates the ToggleButton
 * widget. Three toggle buttons control the
 * color of a drawing area. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GToggleButton extends Window 
             implements ToggleButton.Toggled {

    private ToggleButton tb1;
    private ToggleButton tb2;
    private ToggleButton tb3;
    
    private DrawingArea darea;
    private Color color;

    public GToggleButton() {
    
        setTitle("ToggleButton");

        initUI();

        setPosition(WindowPosition.CENTER);
        
        setSizeRequest(350, 220);
        showAll();
    }
    
    
    public void initUI() {
    
        color = new Color(0, 0, 0);
    
        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        Fixed fixed = new Fixed();

        tb1 = new ToggleButton("Red");
        tb1.setSizeRequest(80, 35);
        tb1.connect(this);
        
        tb2 = new ToggleButton("Green");
        tb2.setSizeRequest(80, 35);
        tb2.connect(this);
        
        tb3 = new ToggleButton("Blue");
        tb3.setSizeRequest(80, 35);
        tb3.connect(this);
        
        darea = new DrawingArea();
        darea.modifyBackground(StateType.NORMAL, Color.BLACK);
        darea.setSizeRequest(150, 150);

        fixed.put(tb1, 20, 20);
        fixed.put(tb2, 20, 65);
        fixed.put(tb3, 20, 110);
        
        fixed.put(darea, 150, 20);
        
        add(fixed);
    }
    

    public void onToggled(ToggleButton toggleButton) {
    
        int red = color.getRed();
        int green = color.getGreen();
        int blue = color.getBlue();
    
        if ("Red".equals(toggleButton.getLabel())) {
            if (toggleButton.getActive()) {
                red = 65535;
            } else {
                red = 0;
            }
        }
        
        if ("Green".equals(toggleButton.getLabel())) {
            if (toggleButton.getActive()) {
                green = 65535;
            } else {
                green = 0;
            }
        }
    
        if ("Blue".equals(toggleButton.getLabel())) {
            if (toggleButton.getActive()) {
                blue = 65535;
            } else {
                blue = 0;
            }
        }
    
        color = new Color(red, green, blue);
        darea.modifyBackground(StateType.NORMAL, color);
    }
    
    public static void main(String[] args) {

        Gtk.init(args);
        new GToggleButton();
        Gtk.main();
    }
}
</pre>

<p>
In our example, we show three toggle buttons and a <b class="keyword">DrawingArea</b>. 
We set the background color of the area to black. The togglebuttons will toggle the red, 
green and blue parts of the color value. The background color will depend on which
togglebuttons we have pressed. 
</p>

<pre class="explanation">
 color = new Color(0, 0, 0);
</pre>

<p>
This is the color value that is going to be updated with the toggle buttons. 
</p>

<pre class="explanation">
 tb1 = new ToggleButton("Red");
 tb1.setSizeRequest(80, 35);
 tb1.connect(this);
</pre>

<p>
The <b class="keyword">ToggleButton</b> widget is created. We set it's size
to 80x35 pixels. It is connected to the <b class="keyword">onToggled()</b> 
method. 
</p>

<pre class="explanation">
 darea = new DrawingArea();
 darea.modifyBackground(StateType.NORMAL, Color.BLACK);
 darea.setSizeRequest(150, 150);
</pre>

<p>
The <b class="keyword">DrawingArea</b> widget is the widget, that
displays the color, mixed by the toggle buttons. At start, it shows
black color. 
</p>


<pre class="explanation">
 if ("Red".equals(toggleButton.getLabel())) {
     if (toggleButton.getActive()) {
         red = 65535;
     } else {
         red = 0;
     }
 }
</pre>

<p>
We update the red part of the color based on the 
state of the red toggle button.
</p>

<pre class="explanation">
 color = new Color(red, green, blue);
 darea.modifyBackground(StateType.NORMAL, color);
</pre>

<p>
The color value is updated and set to the <b class="keyword">DrawingArea</b> widget. 
</p>


<br>
<img src="/img/gui/javagnome/togglebuttons.png" alt="ToggleButton widget">
<div class="figure">Figure: ToggleButton widget</div>
<br>

<h2>Calendar</h2>

<p>
Our final widget is the <b class="keyword">Calendar</b> widget. It is used to 
work with dates.
</p>

<div class="codehead">calendar.java</div>
<pre class="code">
package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Calendar;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.VBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial 
 *
 * This program demonstrates the Calendar 
 * widget. We show a selected date in a 
 * label widget. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GCalendar extends Window {

    private Calendar calendar;
    private Label label;

    public GCalendar() {

        setTitle("Calendar");
        
        initUI();

        connect(new Window.DeleteEvent() {
            public boolean onDeleteEvent(Widget source, Event event) {
                Gtk.mainQuit();
                return false;
            }
        });
        
        setDefaultSize(260, 120);
        setPosition(WindowPosition.CENTER);
        showAll();    
    }
    
    private void initUI() {
    
        VBox vbox = new VBox(false, 1);
    
        calendar = new Calendar();
        label = new Label(getDate());
        
        calendar.connect(new Calendar.DaySelected() {

            public void onDaySelected(Calendar calendar) {
                label.setLabel(getDate());
            }
        });

        vbox.add(calendar);

        label.setSizeRequest(-1, 50);
        vbox.add(label);
        
        add(vbox);
    }
    
    
    private String getDate() {
        int year = calendar.getDateYear();
        int month = calendar.getDateMonth();
        int day = calendar.getDateDay();
        String dateLabel = month + "/" + day + "/" + year; 
        
        return dateLabel;
    }

    
    public static void main(String[] args) {
        Gtk.init(args);
        new GCalendar();
        Gtk.main();        
    }
}
</pre>

<p>
We have the <b class="keyword">Calendar</b> widget and a <b class="keyword">Label</b>.
The selected day from the calendar is shown in the label. 
</p>

<pre class="explanation">
 calendar = new Calendar();
</pre>

<p>
<b class="keyword">Calendar</b> widget is created. 
</p>

<pre class="explanation">
 public void onDaySelected(Calendar calendar) {
     label.setLabel(getDate());
 };
</pre>

<p>
In the <b class="keyword">onDaySelected()</b> method we update the label to 
the currently selected date. 
</p>


<br>
<img src="/img/gui/javagnome/calendar.png" alt="Calendar">
<div class="figure">Figure: Calendar</div>
<br>

<hr class="btm">

<p>
In this chapter, we finished talking about widgets in Java Gnome. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 12, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


